import React, { PureComponent, Fragment } from 'react';
import { exportTable, renderTable } from './util';

const apperance = {
  color: '#fff',
  backgroundColor: '#1890ff',
  border-color: '#1890ff';
  text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
  -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.045);
  box-shadow: 0 2px 0 rgba(0,0,0,0.045);
};

class ExportTableToExcel extends PureComponent {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  exportTable() {
    const table = this.myRef.current.innerHTML;
    exportTable(table);
  }

  render() {
    const { children, data, style } = this.props;
    return (
      <div>
        <button style={style ? style : apperance} onClick={this.exportTable.bind(this)}>
          导出
        </button>
        <div className="exportTableToExcel" style={{ display: 'none' }} ref={this.myRef}>
          {children && children}
          {data && renderTable(data)}
        </div>
      </div>
    );
  }
}

export default ExportTableToExcel;
